<template>
  <div style="padding: 20px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="属性查询" name="1">
        <FormModal ref="tab1" :formName="fuzzyItem" />
      </el-tab-pane>
      <!-- <el-tab-pane label="属性查询" name="2">
        <FormModal ref="tab2" :formName="null" />
      </el-tab-pane> -->
      <el-tab-pane label="几何查询" name="3">
        <span style="margin-right: 20px">绘制几何图形：</span>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="drawGeo"
          :disabled="!canDraw"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          @click="delGeo"
        ></el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { drawType } from "../config/draw";
import FormModal from "./formModal.vue";

export default {
  props: ["map"],

  components: {
    FormModal,
  },

  data() {
    return {
      activeName: "1",
      draw: null,
      baseMap: null,
      source: null,
      param: "厦门",
      canDraw: true,
      fuzzyItem: [{ label: "名称", prop: "name" }],
    };
  },

  methods: {
    handleClick() {},
    drawGeo() {
      // 初始处理
      this.canDraw = false;
      let layerGroup = this.baseMap.getAllLayers();
      layerGroup[8].setVisible(true);
      this.source = layerGroup[8].getSource();
      this.source.clear();
      this.$store.commit("updateDraw", true);

      // 画图
      this.draw = drawType(this.source, "Polygon");
      this.baseMap.addInteraction(this.draw);
      this.draw.on("drawend", async () => {
        await this.baseMap.removeInteraction(this.draw);
        // 添加关键字来区分样式
        this.param = this.source.getFeatures()[0];
        this.param.set("name", "draw");
        this.$store.commit("updateDraw", false);
      });
    },
    delGeo() {
      this.canDraw = true;
      this.source.clear();
    },

    resetForm() {
      let tab = this.activeName;
      let refName = tab === "1" ? "tab1" : tab === "2" ? "tab2" : "tab3";
      if (tab === "3") {
        return;
      }
      this.$refs[refName].resetForm();
    },

    async submitForm() {
      let tab = this.activeName;
      if (tab === "3") {
        return true;
      }
      let refName = tab === "1" ? "tab1" : tab === "2" ? "tab2" : "tab3";
      let res = await this.$refs[refName].submitForm();
      if (res) {
        this.param = this.$refs[refName].validateForm;
      }
      return res;
    },
  },

  watch: {
    map() {
      this.baseMap = this.map;
    },
  },
};
</script>

<style scoped>
</style>